<template>
  <div class="regionBox">
    <span v-for="(item) in Props.defaultItem" :key="item.id" :class="item.titleClass">
      <div class="itemBox">
        <el-checkbox :label="item.coding" v-model="item.checkAll" style="font-weight:600"
          :indeterminate="item.isIndeterminate" @change="handleCheckAllChange(item, $event)">{{ item.areaName }}
        </el-checkbox>
        <el-icon class="btnHidden" @click="showNextChild(item)"
          v-if="item.childrenList.length > 0 && item.titleType < Props.titleType">
          <ArrowDownBold v-if="item.childrenList.length > 0 && item.isShow" />
          <ArrowUpBold v-if="item.childrenList.length > 0 && !item.isShow" />
        </el-icon>
      </div>

      <el-checkbox-group v-model="item.chosedArr" @change="handleCheckChange(item)" v-if="item.isShow">
        <MyAreaList v-if="item.childrenList.length > 0" :defaultItem="item.childrenList"
          :defaultItex="Props.defaultItex" :defaultTitle="Props.defaultTitle" :dataAll="Props.dataAll"
          :titleType="Props.titleType"/>
      </el-checkbox-group>
    </span>
  </div>
</template>
<!-- 省市区组件 -->
<script lang="ts" setup>
import { ArrowUpBold, ArrowDownBold } from "@element-plus/icons-vue";

const Props: any = defineProps({
  defaultItem: {
    type: Array,
    default() {
      return []
    }
  },
  defaultItex: {
    type: Number,
    default: 0,
  },
  defaultTitle: {
    type: String,
    default: '',
  },
  dataAll: {
    type: Array,
    default() {
      return []
    }
  },
  titleType:{
    type: Number,
    default: 3,
  }
});
const handleCheckAllChange = (item: any, e: any) => {
  item.checkAll = e;
  item.chosedArr = e ? JSON.parse(JSON.stringify(item.allArr)) : [];
  console.log('000')
  console.log(item.chosedArr)
  item.isIndeterminate = false;
  // 有下级去处理下级
  if (item.childrenList.length > 0) {
    findChildren(item.childrenList, e);
  }
  // 处理上级
  if (item.parentId !== 0) {
    findParent(Props.dataAll, item.parentId);
  }
  console.log(111)
  console.log(Props.dataAll)
};
const handleCheckChange = (val: any) => {
  // console.log(val)
  const length = val.childrenList.length;
  let checkedLength = 0;
  val.childrenList.forEach((options: any) => {
    if (options.checkAll) {
      checkedLength++;
    }
  });
  val.checkAll = checkedLength === length;
  val.isIndeterminate = checkedLength > 0 && checkedLength < length;
  // 处理上级
  if (val.parentId !== 0) {
    console.log("val.parentId = " + val.parentId)
    findParent(Props.dataAll, val.parentId);
  }
  console.log(Props.dataAll)
};
const findChildren = (list: any, e: any) => {
  list.forEach((child: any) => {
    child.chosedArr = e ? JSON.parse(JSON.stringify(child.allArr)) : [];
    child.isIndeterminate = false;
    child.checkAll = e;
    child.childrenList.forEach((options: any) => {
      options.checkAll = e;
      if (child.childrenList.length > 0) {
        findChildren(child.childrenList, e);
      }
    });
  });
};
const findParent = (list: any, parentId: any) => {
  list.forEach((result: any) => {
    let parentCheckedLength = 0;
    let parentIndeterminateLength = 0;
    if (result.coding === parentId) {
      console.log("result.coding = " + result.coding)
      result.chosedArr = [];
      result.childrenList.forEach((item: any) => {
        if (item.isIndeterminate) {
          parentIndeterminateLength++;
        } else if (item.checkAll) {
          parentCheckedLength++;
          result.chosedArr.push(item.coding);
        }
      });
      result.checkAll = parentCheckedLength === result.allArr.length;
      result.isIndeterminate = (parentIndeterminateLength > 0 || parentCheckedLength > 0) && parentCheckedLength < result.allArr.length;
      if (result.parentId !== 0) {
        findParent(Props.dataAll, result.parentId);
      }
    } else if (result.childrenList.length > 0) {
      findParent(result.childrenList, parentId);
    }
  });
};
const showNextChild = (item: any) => {
  let str = item.isShow;
  Props.dataAll.map((i: any) => {
    i.childrenList.length > 0 &&
      i.childrenList.map((child: any) => {
        // let arr = child.isShow;
        child.isShow = false;
        child.childrenList.length > 0 &&
          child.childrenList.map((son: any) => {
            son.isShow = false;
            if (item.level == 2) {
              if (child.coding == item.parentId) {
                child.isShow = true;
              }
              son.childrenList.length > 0 &&
                son.childrenList.map((children: any) => {
                  children.isShow = false;
                });
            }
          });
      });
  });
  item.isShow = !str;
};
</script>

<style lang="scss" scoped>
.contentr {
  background: #fff;
}

.regionBox ::v-deep .el-checkbox {
  margin-right: 0;
}

.btnHidden {
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 14px;
  cursor: pointer;
}

.titleClass0 {
  display: block;
  width: 100%;
  text-align: left;
}

.titleClass0 ::v-deep(.el-checkbox__label) {
  color: #000;
  font-weight: 600;
}

.titleClass1 ::v-deep(.el-checkbox__label),
.titleClass2 ::v-deep(.el-checkbox__label) {
  color: #606266;
  font-weight: 400;
}

.titleClass1 .el-checkbox-group {
  width: 92%;
  background: #efefef;
  margin: 0 auto;
  padding: 10px 20px 10px 0px;
}

.titleClass2 .el-checkbox-group {
  width: 86%;
  background: #fefa8380;
  margin: 0 auto;
  padding: 10px 20px 10px -10px;
}

.titleClass3 .el-checkbox {
  margin-left: 20px;
}

.titleClass3 {
  display: inline-block;
}

.itemBox {
  display: inline-block;
  margin-left: 20px;
}
</style>